<template>
  <div>
    <div class="submit">


      <!-- 脑袋 -->
      <van-sticky :offset="0">
        <!-- <van-button type="primary">基础用法</van-button> -->
        <div class="top">
          <div class="topin">
            <van-icon name="wap-home-o" class="change" @click="changeindex" />
            <div class="toptext">网易严选</div>
            <div class="topright">
              <van-icon name="search" @click="changesearch" />
              <van-icon name="shopping-cart-o" class="topright2" badge="99+" @click="changeshopcart" />
            </div>
          </div>
        </div>
      </van-sticky>


      <!-- 地址 -->
      <div class="address">
        <div class="addressin">
          <div class="addressname">fred</div>
          <div class="addressmid">
            <p>131****9508</p>
            <p>北京北京北京北京北京北京</p>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 表一 -->
      <div class="list1">
        <div class="list1in">
          <ul>

            <li class="listli">
              <div class="list1top">
                <div>暂无可用优惠券</div>
                <div>0张</div>
              </div>
              <div class="list1topin">
                <van-icon name="arrow" />
              </div>
            </li>

            <li class="list1mid">
              <div class="list1midleft">
                <input type="checkbox">
                <span class="list1midtext">礼品卡余额￥00.00</span>
              </div>
              <div class="list1topin">
                <van-icon name="arrow" />
              </div>

            </li>



            <li class="list1bot">
              <div class="list1botin">
                <div>
                  <input type="checkbox">
                  余额
                </div>
                <van-icon name="info-o" />
              </div>
            </li>




          </ul>
        </div>
      </div>

      <!-- 表二 -->
      <div class="list2">
        <div class="list2in">
          <ul>
            <li class="list2inli">
              <span>商品合计</span>
              <span class="list2inli2">{{ allMoney }}</span>
            </li>

            <li class="list2inli">
              <span>邮费</span>
              <span class="list2inli2">￥123.00</span>
            </li>

            <li class="list2inli">
              <span>活动优惠<van-icon name="info-o" /></span>
              <span class="list2inli2">￥123.00</span>
            </li>

            <li class="list2inli">
              <span>优惠券</span>
              <span class="list2inli2">￥123.00</span>
            </li>

            <li class="list2inlilast">
              <div class="list2lastin">
                <input type="checkbox" name="" id="">
                <span class="list2lastintext">我要开发票</span>
              </div>
              <van-icon name="arrow" class="list2lastsign" />
            </li>
          </ul>
        </div>
      </div>

      <!-- 图片标签 -->
      <div class="pictag">
        <div class="pictagin">
          <span class="pictag1">包裹一</span>
          <span class="pictag2">5:00前支付,预计明天送达</span>
        </div>
        <div v-for="item in shopcart" :key="item.id">
          <van-card :num="item.skuNum" tag="标签" :price="item.cartPrice" :desc="item.skuName" title="商品标题"
            :thumb="item.imgUrl" origin-price="10.00" />
        </div>

      </div>

      <!-- 我同意 -->
      <div class="agree">
        <input type="checkbox">
        <span class="agreetext">我已同意</span>
        <span>《网易严选服务协议》</span>
      </div>


      <!--  -->
      <!-- <van-submit-bar :price="3050" button-text="提交订单" /> -->




      <div class="blank"></div>

     
     

      <!--  底部提交订单-->
      <van-submit-bar button-text="提交订单" @click="submit2" class="submitfoot">
        <template #default>
          <div class="submitfooter">
            应付:{{ allMoney }}
          </div>
        </template>
      </van-submit-bar>







    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';

export default defineComponent({
  name: 'Submit',

})
</script>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { useShopCartStore } from '../../../stores/modules/shopCart'
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';
const shopcartList = useShopCartStore()
const { shopcart } = storeToRefs(shopcartList)
const router = useRouter()

onMounted(() => {
  // console.log(console.log(shopcartList.$state.shopcart));
  shopcart
})
// const isallChecked = computed(() => {
shopcart.value = shopcart.value.filter(item => item.isChecked === 1)
// })

const changeindex = () => {
  router.push('/index')
}

const changeshopcart = () => {
  router.push('/shopCart')
}

const changesearch = () => {
  router.push('/search')
}
const submit2 = () => {
  router.push('/pay')
}

// 总钱数
const allMoney = computed(() => {
  let num = 0
  const list = shopcart.value.filter(item => item.isChecked === 1)
  list.forEach(item => {
    num += item.skuPrice * item.skuNum
  })
  return num
})
</script>

<style lang="less" scoped>
.submit {
  width: 100%;
  background-color: #f4f4f4;
  overflow: hidden;
  position: relative;

  .top {
    width: 100%;
    height: 44px;
    // background-color: #ffffff;
    // position: fixed;
    top: 0;

    .topin {
      width: 356px;
      height: 44px;
      margin-left: 12px;
      margin-right: 8px;
      background-color: #fafafa;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .toptext {
        font-size: 26px;
      }

      .topright {
        width: 74px;
        height: 32px;
        display: flex;
        justify-content: space-between;

        .topright2 {
          margin-left: 10px;
        }
      }
    }
  }

  .address {
    width: 100%;
    height: 93px;
    border-top: 4px solid blue;
    background-color: #ffffff;

    .addressin {
      width: 317px;
      height: 53px;
      // background-color: aquamarine;
      margin: 20px 20px 43px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .addressname {
        font-size: 14px;
        margin-bottom: 5px;
      }

      .addressmid {
        font-size: 14px;
      }
    }
  }

  .list1 {
    width: 100%;
    // height: 166px;
    background-color: #ffffff;
    margin-bottom: 10px;

    .list1in {
      // width: 360px;
      height: 156px;
      // background-color: blue;
      margin-left: 15px;



      .listli {
        font-size: 16px;
        width: 350px;
        height: 52px;
        display: flex;
        justify-content: space-between;
        // background-color: aqua;
        align-items: center;
        border-bottom: 1px solid black;

        .list1topin {
          font-size: 24px;
        }

        .list1top {
          width: 320px;
          height: 52px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 20px;

          // font-size: 16px;
          .list1mid {
            font-size: 16px;
          }
        }

      }

      .list1mid {
        display: flex;
        justify-content: space-between;
        width: 350px;
        height: 52px;
        align-items: center;
        // background-color: aquamarine;
        border-bottom: 1px solid black;

        .list1midleft {
          width: 350px;
          height: 52px;
          margin-right: 50px;

          .list1midtext {
            font-size: 16px;
          }
        }

      }

      .list1bot {
        // display: flex;
        // align-items: center;
        width: 350px;
        height: 52px;
        line-height: 52px;

        .list1botin {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
        }
      }

    }
  }

  .list2 {
    width: 100%;
    height: 230px;
    background-color: #ffffff;
    margin-bottom: 10px;

    // padding-left: 15px;
    .list2in {
      width: 360px;
      height: 260px;
      // margin-right: 15px;
      margin-left: 15px;
      // background-color: coral;

      .list2inli {
        // width: 370px;
        height: 42px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        align-items: center;
        border-bottom: 1px solid black;

        .list2inli2 {
          margin-right: 15px
        }
      }

      .list2inlilast {
        font-size: 16px;
        height: 42px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .list2lastin {
          .list2lastintext {
            margin-left: 8px;
          }
        }

        .list2lastsign {
          margin-right: 15px;
        }
      }
    }
  }

  .pictag {
    width: 375px;
    height: 170px;
    margin-left: 15px;

    .pictagin {
      width: 355px;
      height: 47px;
      border-bottom: 1px solid grey;

      .pictag1 {
        font-size: 14px;
        padding-right: 8.5px;
      }

      .pictag2 {
        font-size: 12px;
      }
    }

  }

  .agree {
    width: 360px;
    height: 18px;
    background-color: #f4f4f4;
    margin-left: 15px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 12px;
    line-height: 18px;

    .agreetext {
      margin-left: 5px
    }
  }

  .submitfooter {
    margin-left: 5px;
  }

  .blank {
    // background-color: cadetblue;
    width: 100%;
    height: 50px;
  }
  // .submitfoot{
  //   // z-index: 9999;
  // }

 
}</style>
